<template>
  <a-card>
    <div v-show="showSpin">
      <a-spin tip="等待导出..." size="large">
        <div class="spin-content"></div>
      </a-spin>
    </div>
    <p style="text-align: center; font-size: 18px"></p>
    <br />
    <!-- 顶部信息 -->
    <!-- 表单 -->
    <a-form-model v-bind="layout" :model="searchForm">
      <a-row>
        <a-col :xl="8" :lg="12" :md="8" :sm="24" :xs="24">
          <a-form-model-item label="盘点日期">
            <a-date-picker v-model="searchForm.pandianDate" />
          </a-form-model-item>
        </a-col>
        <a-col :xl="8" :lg="12" :md="8" :sm="24" :xs="24">
          <a-form-model-item label="所属仓库">
            <a-select
              v-model="searchForm.storageUnitName"
              showSearch
              style="width: 100%"
              @change="setdataSourcestorageUnit"
            >
              <a-select-option
                v-for="item in storageList"
                :key="item.depotId"
                :value="
                  item.storageUnitNo +
                    '|' +
                    item.storageUnitName +
                    '|' +
                    item.storageUnitId
                "
              >
                {{ item.storageUnitNo }}
                {{ item.storageUnitName }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xl="8" :lg="12" :md="8" :sm="24" :xs="24">
          <a-form-model-item label="盘点人">
            <a-select
              @change="getcwhsmanagerId"
              v-model="searchForm.pandianMan"
              showSearch
              style="width:100%"
              @search="searchUserInfoList"
            >
              <a-select-option
                v-for="item in UserList"
                :key="item.userId"
                :value="item.workNo + '|' + item.userName + '|' + item.userId"
              >
                {{ item.workNo }} {{ item.userName }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
          <a-button
            type="primary"
            style="float: left; margin-bottom: 10px"
            @click="exportToExcel"
          >
            导出</a-button
          >
        </a-col>
        <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24"></a-col>
        <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24" align="right">
          <a-button type="primary" @click="Search()">查询</a-button>
          <a-button style="margin-left: 8px" @click="Reset()">重置</a-button>
        </a-col>
      </a-row>
    </a-form-model>
    <!-- 表格 -->
    <br />
    <br />
    <a-table
      v-cloak
      :columns="columns"
      :data-source="dataSource"
      :pagination="pagination"
      @change="handleTableChange"
      style="margin-top: 20px"
      :scroll="{ x: 4000, y: 670 }"
    >
    </a-table>
  </a-card>
</template>
<script>
//接口

import { CommonAjax } from "@/services/modules/common";
const comHttp = new CommonAjax(); // 公用接口
// import FileSaver from "file-saver";
// import XLSX from "xlsx";
// import { sheet2blob } from "@/utils/export.js";
//
const columns = [
  {
    title: "盘点日期",
    dataIndex: "",
    key: "",
    align: "center",
  },
  {
    title: "所属仓库",
    dataIndex: "storageUnitName",
    key: "storageUnitName",
    align: "center",
  },
  {
    title: "所属仓位",
    dataIndex: "",
    key: "",
    align: "center",
  },
  {
    title: "存货编码",
    dataIndex: "inventoryNo",
    key: "inventoryNo",
    align: "center",
  },
  {
    title: "存货名称",
    dataIndex: "invname",
    key: "invname",
    align: "center",
  },
  {
    title: "规格型号",
    dataIndex: "invspec",
    key: "invspec",
    align: "center",
  },
  {
    title: "单位",
    dataIndex: "measname",
    key: "measname",
    align: "center",
  },
  {
    title: "批次号",
    dataIndex: "",
    key: "",
    align: "center",
  },
  {
    title: "账面数量",
    dataIndex: "",
    key: "",
    align: "center",
  },
  {
    title: "盘点数量",
    dataIndex: "",
    key: "",
    align: "center",
  },
  {
    title: "差异数量",
    dataIndex: "",
    key: "",
    align: "center",
  },
  {
    title: "备注",
    dataIndex: "remarks",
    key: "remarks",
    align: "center",
  },
  {
    title: "盘点人",
    dataIndex: "pandianMan",
    key: "pandianMan",
    align: "center",
  },
  {
    title: "监盘人",
    dataIndex: "",
    key: "",
    align: "center",
  },
  {
    title: "审计人",
    dataIndex: "",
    key: "",
    align: "center",
  },
  {
    title: "制单人",
    dataIndex: "",
    key: "",
    align: "center",
  },
  {
    title: "制单时间",
    dataIndex: "",
    key: "",
    align: "center",
  },
];
export default {
  data() {
    return {
      //---------------分页--------------
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10, //每页中显示10条数据
        // showSizeChanger: true,
        pageSizeOptions: ["5", "10", "20", "30"], //每页中显示的数据
        showTotal: (total) => `共有${total}条数据`, //分页中显示总的数据
        showSizeChanger: true, // 显示页面条数改变
        showQuickJumper: true, // 显示快速跳转
      },
      queryParam: {
        //查询参数
        page: 1, //第几页
        size: 10, //每页中显示数据的条数
        pandiandate: "",
        storageUnitName: "",
        pandianMan: "",
      },
      // 搜索栏布局
      layout: {
        labelCol: { span: 8 },
        wrapperCol: { span: 15 },
      },
      searchForm: {
        pandianDate: "", //盘点日期
        pandianMan: "", //盘点人
        pandianManNo: "",
        pandianManId: "",
        storageUnitName: "", // 所属仓库
        storageUnitId: "", // 所属仓库Id
        storageUnitNo: "", // 所属仓库编号
      },
      columns,
      UserList: [], // 盘点人列表
      workNoList: [], // 判重使用
      storageList: [], // 仓库列表
      dataSource: [],
    };
  },
  methods: {
    // exportToExcel() {
    //   this.showSpin = true; //打印加载中
    //   if (this.formdata.sort === undefined) {
    //     this.formdata.sort = "";
    //   }
    //   if (this.formdata.inventoryNo === undefined) {
    //     this.formdata.inventoryNo = "";
    //   }
    //   if (this.formdata.necessaryToCheck === undefined) {
    //     this.formdata.necessaryToCheck = "";
    //   }
    //   $http
    //     .GetInventoryInformationList(
    //       "?pageNo=1&pageSize=" +
    //         this.maxSize +
    //         "&invcode=" +
    //         this.formdata.inventoryNo
    //     )
    //     .then((res) => {
    //       console.log("导入的数据", res.result.records);
    //       let array = res.result.records;
    //       this.exportBasic(array);
    //     });
    // },

    // // 接收数组，进行导出
    // exportBasic(Array) {
    //   console.log("要导出的数据为:::::", Array);
    //   // 规整要导出的数据:::::
    //   let array = [];
    //   for (let i = 0; i < Array.length; i++) {
    //     let data = {
    //       序号: i + 1,

    //     };
    //     array.push(data);
    //   }
    //   // 生成 sheet 表格 数据
    //   let sheet = XLSX.utils.json_to_sheet(array, {
    //     // 对导出内容进行相应的排序,手动排序。
    //     header: [
    //       "序号",
    //
    //     ],
    //   });
    //   // 生成导出表格
    //   let blob = sheet2blob(sheet);
    //   try {
    //     FileSaver.saveAs(
    //       new Blob([blob], {
    //         type: "application/octet-stream",
    //       }),
    //       "存货信息档案.xlsx" // 导出文件夹名称
    //     );
    //   } catch (e) {
    //     console.log(e);
    //   }
    //   this.showSpin = false; //打印加载中
    // },
    // 获取仓库
    getApplyStorage() {
      this.storageList = [];
      // 获取仓库名称
      comHttp.getStorageName().then((res) => {
        console.log("获取所有仓库", res);
        for (let i = 0; i < res.result.length; i++) {
          let data = {
            storageUnitName: res.result[i].storname, //仓库名称
            storageUnitNo: res.result[i].storcode, //仓库编码
            storageUnitId: res.result[i].pkStordoc, //id
          };
          this.storageList.push(data);
        }
        console.log("this.storageList", this.storageList);
      });
    },
    // 设置所属仓库, 上面表单触发事件
    setdataSourcestorageUnit(value) {
      let array = value.split("|");
      this.searchForm.storageUnitId = array[2];
      this.searchForm.storageUnitName = array[1];
      this.searchForm.storageUnitNo = array[0];
    },
    // 盘点人列表
    getcwhsmanagerId(data) {
      let array = data.split("|");
      this.searchForm.pandianManNo = array[0];
      this.searchForm.pandianMan = array[1];
      this.searchForm.pandianManId = array[2];
      console.log(" this.searchForm", this.searchForm);
    },
    // 分页函数
    handleTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.queryParam.page = pagination.current;
      this.queryParam.size = pagination.pageSize;
      let queryPath = this.getQueryPath();
      this.getOutStorageList(queryPath);
    },
    //查询函数
    Search() {},
    //重置函数
    Reset() {
      this.searchForm = {
        pandiandate: null, //盘点日期
        storageUnitName: null, //所属仓库
        pandianMan: null, //盘点人
      };
      this.pandianMan = {
        total: 0,
        current: 1,
        pageSize: 10, //每页显示10条数据
        pageSizeOptions: ["10"],
        showTotal: (total) => `共有${total}条数据`, //分页中显示总的数据
      };
      this.queryPathCache = "";
    },
    // 查询人员信息列表
    searchUserInfoList(value) {
      if (value != "") {
        let queryPath = "?username=" + value;

        comHttp.getUserInfoByUserName(queryPath).then((res) => {
          console.log("queryPath", this.queryPath);
          for (let i = 0; i < res.result.list.length; i++) {
            if (!this.workNoList.includes(res.result.list[i].workNo)) {
              let data = {
                userName: res.result.list[i].username,
                userId: res.result.list[i].id,
                workNo: res.result.list[i].workNo,
              };
              this.UserList.push(data);
              this.workNoList.push(res.result.list[i].workNo);
            }
          }
          console.log("userlist", this.UserList);
        });
      }
    },
  },
  mounted() {
    this.getApplyStorage(); // 获取仓库
  },
};
</script>
<style></style>
